<template>
  <scroll-handle>
    <div
      class="change-img"
      @mouseover="mouseenterHander()"
      @mouseleave="mouseLeaveHander()"
    >
      <div class="text-word" v-show="isEnter" :class="isEnter?'show-text-word':''">
        <div class="brand-msg">{{caseTypeStr}} | {{title}}</div>
      </div>
      <div class="bgimg">
        <el-image class="imgstyle" :src="brandImg" fit="cover" />
      </div>
    </div>
  </scroll-handle>
</template>

<script>
import scrollHandle from "@/components/scrollHandle.vue";
export default {
  name: "LightWebChangeImages",
  components: {
    scrollHandle,
  },
  props: {
     brandImg:{
         style:String,
         default:''
     },
     title:{
         style:String,
         default:''
     },
     caseTypeStr:{
         style:String,
         default:''
     },
  },
  data() {
    return {
      isEnter: false,
    };
  },

  mounted() {
    // window.addEventListener('scroll', this.mouseLeaveHander);/
  },

  methods: {
    mouseenterHander() {
      this.isEnter = true;
    },
    mouseLeaveHander() {
      this.isEnter = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.change-img {
  width: 100%;
  height: 100%;
  position: relative;
}
.text-word {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba($color: #000000, $alpha: 0.4);
  z-index: 5;
  cursor: pointer;
}
.show-text-word{
  animation-name: show;
  animation-duration: 1s;
}
@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.bgimg {
  width: 100%;
  height: 450px;
  max-height: 450px;
}
.imgstyle {
  width: 100%;
  height: 450px;
  max-height: 450px;
}
.brand-msg {
  display: flex;
  padding: 25px;
  color: #ffffff;
  font-size: 30px;
  line-height: 30px;
}



</style>